<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>效果</title>
    <script src="libs/Cesium/Cesium.js"></script>
    <link href="libs/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="libs/dat.gui.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
    <script src="libs/CesiumPlugin/cesium-plugin.js"></script>
    <script>
        const viewer = new CesiumPlugin.Viewer("cesiumContainer", {
            // terrainProvider: Cesium.createWorldTerrain(),
        });

        const tileset = new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(69380),
        });

        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset);

        const positions = [
            Cesium.Cartographic.fromDegrees(144.959871, -37.834551, 10),
            Cesium.Cartographic.fromDegrees(144.989984, -37.777394, 10),
            Cesium.Cartographic.fromDegrees(144.896752, -37.786167, 10),
            Cesium.Cartographic.fromDegrees(144.891453, -37.837318, 10),
            Cesium.Cartographic.fromDegrees(144.959871, -37.834551, 10),
        ];
        const water = new CesiumPlugin.Water({
            scene: viewer.scene,
            positions: positions,
            height: 10,
            rippleSize: 100,
        });

        const gui = new dat.GUI();
        const waterParams = {
            波纹大小: 50.0,
            透明度: 0.9,
            反射率: 0.3,
            扭曲: 3.7,
            高度: 10,
        };
        function waterParamsUpdate() {
            water.rippleSize = waterParams["波纹大小"];
            water.waterAlpha = waterParams["透明度"];
            water.reflectivity = waterParams["反射率"];
            water.distortionScale = waterParams["扭曲"];
            water.height = waterParams["高度"];
        }
        gui.add(waterParams, "波纹大小").min(0).max(300).onChange(waterParamsUpdate);
        gui.add(waterParams, "透明度").min(0).max(1).onChange(waterParamsUpdate);
        gui.add(waterParams, "反射率").min(0).max(1).onChange(waterParamsUpdate);
        gui.add(waterParams, "扭曲").min(0).max(8).onChange(waterParamsUpdate);
        gui.add(waterParams, "高度").min(70).max(100).onChange(waterParamsUpdate);


        let aaa = {
      fabric: {
        type: v.Material.WaterReflectionType,
        uniforms: {
          texture: F.getAssetsBaseUrl(W(379)),
          normalTexture: F[W(378)](W(384)),
          speed: 0.2,
          fixedFrameToEastNorthUpTransform: [
            0.9686, -0.16, 0.1904, 0, 0.2488, 0.6231, -0.7415, 0, 0, 0.7656,
            0.6433, 0, -0, 21058.9824, -6369376.5, 1,
          ],
          size: 100,
          waterColor: new v.Color(0, 0.1176, 0.0588, 1),
          waterAlpha: 0.9,
          rf0: 0.3,
          lightDirection: new v[W(371)](0, 0, 1),
          sunShiny: 100,
          distortionScale: 3.7,
        },
        source:
          "uniform sampler2D texture;uniform sampler2D normalTexture;uniform float speed;uniform mat4 fixedFrameToEastNorthUpTransform;varying vec4 v_worldPosition;varying vec4 v_uv;uniform float size;uniform vec4 waterColor;uniform float waterAlpha;uniform float rf0;uniform vec3 lightDirection;uniform float sunShiny;uniform float distortionScale;vec3 sunDirection=normalize(lightDirection);vec3 sunColor=vec3(1.0);float time=fract(czm_frameNumber*speed/1000.0);vec4 getNoise(sampler2D normalMap,vec2 uv){vec2 uv0=(uv/103.0)+vec2(time/17.0,time/29.0);vec2 uv1=uv/107.0-vec2(time/-19.0,time/31.0);vec2 uv2=uv/vec2(8907.0,9803.0)+vec2(time/101.0,time/97.0);vec2 uv3=uv/vec2(1091.0,1027.0)-vec2(time/109.0,time/-113.0);vec4 noise=texture2D(normalMap,uv0)+texture2D(normalMap,uv1)+texture2D(normalMap,uv2)+texture2D(normalMap,uv3);return noise*0.5-1.0;}void sunLight(const vec3 surfaceNormal,const vec3 eyeDirection,float shiny,float spec,float diffuse,inout vec3 diffuseColor,inout vec3 specularColor){vec3 reflection=normalize(reflect(-sunDirection,surfaceNormal));float direction=max(0.0,dot(eyeDirection,reflection));specularColor+=pow(direction,shiny)*sunColor*spec;diffuseColor+=max(dot(sunDirection,surfaceNormal),0.0)*sunColor*diffuse;}czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material=czm_getDefaultMaterial(materialInput);vec2 transformedSt=materialInput.st*2.0-1.0;vec4 noise=getNoise(normalTexture,transformedSt*size);vec3 surfaceNormal=normalize(noise.xzy);vec3 diffuseLight=vec3(0.0);vec3 specularLight=vec3(0.0);vec3 eye=(czm_inverseView*vec4(vec3(0.0),1.0)).xyz;eye=(fixedFrameToEastNorthUpTransform*vec4(eye,1.0)).xyz;vec3 world=(fixedFrameToEastNorthUpTransform*vec4(v_worldPosition.xyz,1.0)).xyz;vec3 worldToEye=eye-world;worldToEye=vec3(worldToEye.x,worldToEye.z,-worldToEye.y);vec3 eyeDirection=normalize(worldToEye);float shiny=sunShiny;float spec=2.0;float diffuse=0.5;sunLight(surfaceNormal,eyeDirection,shiny,spec,diffuse,diffuseLight,specularLight);float distance=length(worldToEye);float distortionScale=distortionScale;vec2 distortion=surfaceNormal.xz*(0.001+1.0/distance)*distortionScale;vec3 reflectionSample=vec3(texture2D(texture,(v_uv.xy/v_uv.w)*0.5+0.5+distortion));float theta=max(dot(eyeDirection,surfaceNormal),0.0);float rf0=rf0;float reflectance=mix(rf0,1.0,pow(1.0-theta,5.0));vec3 waterColor=waterColor.rgb;vec3 scatter=max(0.0,dot(surfaceNormal,eyeDirection))*waterColor;vec3 albedo=mix(sunColor*diffuseLight*0.3+scatter,vec3(0.1)+reflectionSample*0.9+reflectionSample*specularLight,reflectance);material.diffuse=albedo.rgb;material.alpha=waterAlpha;return material;}",
      },
      translucent: function (t) {
        return !0;
      },
    }




    </script>
</body>

</html>
